<script>
import AnalysisVideo from "../../analysisVideo.vue";
import { getShowImage } from "../../../../../../utils";
export default {
  name: "analysis",
  methods: { getShowImage },
  components: { AnalysisVideo },
  inject: ["root", "parent"],
  data() {
    return {
      questionList: [],
      isVip: false,
    };
  },
  props: {
    paragraphItem: Object,
  },
  created() {
    //收集段落里面的问题
		if (this.paragraphItem.contentType === "TOPIC") {
			this.questionList.push(this.paragraphItem);
		}
		for (const item of this.paragraphItem.contentList) {
			if (item.contentType === "TOPIC") {
				this.questionList.push(item);
			}
		}
    this.isVip = this.root.isVip;
  },
};
</script>

<template>
  <view class="component">
    <!--		问题列表-->
    <view class="question-list">
      <view
        class="question-item"
        v-for="item in questionList"
        :key="item.topic.questionId"
      >
        <view style="font-weight: bold">
          <text>{{ item.topic.serialNum }}</text>
          <text>.\t</text>
          <text>{{ item.topic.content }}</text>
        </view>
        <view>
          <text>正确答案：{{ item.topic.answer }}</text>
        </view>
        <view>
          <text>你的作答：</text>
          <text v-if="!item.topic.userAnswer" class="user-answer incorrect"
            >[未作答]</text
          >
          <text
            v-else
            class="user-answer"
            :class="
              item.topic.answer === item.topic.userAnswer
                ? 'correct'
                : 'incorrect'
            "
            >{{ item.topic.userAnswer }}</text
          >
        </view>
        <!--				题目解析和视频讲解-->
        <template v-if="isVip">
          <view
            v-html="item.topic.analysis"
            v-if="item.topic.analysis"
            class="analysis"
          ></view>
          <analysis-video
            v-if="item.topic.videoUrl"
            :video-file-url="getShowImage(item.topic.videoUrl)"
          ></analysis-video>
        </template>
        <view v-else class="btn-container">
          <view class="btn" @click="() => root.checkIsVip()">查看解析</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.component {
  .question-list {
    margin-top: 40rpx;
    .question-item {
      margin-top: 20rpx;
      font-size: 30rpx;
      line-height: 1.7;
      .user-answer {
        font-weight: bold;
      }
      .correct {
        color: #88debc;
      }
      .incorrect {
        color: #ff9c9c;
      }
      .btn-container {
        display: flex;
        justify-content: flex-end;
        margin-top: 10rpx;
        .btn {
          padding: 0 30rpx;
          height: 60rpx;
          border-radius: 30rpx;
          background: var(--theme-color);
          display: flex;
          align-items: center;
        }
      }
      .analysis {
        color: var(--text-color-theme);
      }
    }
  }
}
</style>
